<!--
 * @Author: zxc
 * @Date: 2020-09-18 19:40:10
 * @LastEditTime: 2020-09-19 20:50:01
 * @LastEditors: zxc
 * @Description:
-->
<template>
  <div class="folder-wrapper">
    <!-- <Tree :data="folderTree" :render="renderFunc"></Tree> -->
    <folder-tree
      :folder-list.sync="folderList"
      :file-list.sync="fileList"
      :folder-drop="folderDrop"
      :file-drop="fileDrop"
      :beforeDelete="beforeDelete"
    />
  </div>
</template>

<script>
import { getFolderList, getFileList } from '@/api/data'
// import { putFileInFolder, transferFolderToTree } from '@/lib/util'
import FolderTree from '_c/folder-tree'
export default {
  components: {
    FolderTree
  },
  data () {
    return {
      folderList: [],
      fileList: [],
      // folderTree: [],
      // renderFunc: (h, { root, node, data }) => {
      //   return (
      //     <div class="tree-item">
      //       { data.type === 'folder' ? <icon type="ios-folder" color="#2d8cf0" style="margin-right: 10px;"/> : ''}
      //       { data.title }
      //     </div>
      //   )
      // }
      folderDrop: [
        {
          name: 'rename',
          title: '重命名'
        },
        {
          name: 'delete',
          title: '删除文件夹'
        }
      ],
      fileDrop: [
        {
          name: 'rename',
          title: '重命名'
        },
        {
          name: 'delete',
          title: '删除文件'
        }
      ]
    }
  },
  mounted () {
    Promise.all([getFolderList(), getFileList()]).then(res => {
      // this.folderTree = transferFolderToTree(putFileInFolder(res[0], res[1]))
      this.folderList = res[0]
      this.fileList = res[1]
    })
  }
}
</script>

<style lang="less">
.folder-wrapper{
  width: 300px;
  // .tree-item{
  //   display: inline-block;
  //   width: ~"calc(100% - 50px)";
  //   height: 30px;
  //   line-height: 30px;
  // }
}
</style>
